import { useLocation } from 'react-router-dom';
import { GoldCoinOutlined, MenuOutlined } from 'esy-ui';
import { observer } from 'mobx-react-lite';
import { Img } from '@/components';
import { showHeader } from '@/constants';
import logo from '@/assets/images/common/logo.png';
import BalanceContent from '../balance-content';
import Sidbar from '../sidebar';

function Header() {
  const { pathname } = useLocation();

  if (!showHeader.test(pathname)) return null;

  return (
    <div className='relative bg-head flex items-center justify-center h-11 px-3'>
      <Sidbar>
        <MenuOutlined className='absolute left-3 top-2.5 text-white' />
      </Sidbar>
      <Img boxClassName='h-8 w-24' src={logo} />
      <BalanceContent>
        <GoldCoinOutlined className='absolute right-0 top-0 text-primary p-3 text-xl' />
      </BalanceContent>
    </div>
  );
}

export default observer(Header);
